<template>
<div>
<el-dropdown :show-timeout="100" trigger="click">
    <el-button plain>{{ !comment_disabled?'评论已打开':'评论已关闭' }}
        <i class="el-icon-caret-bottom el-icon--right" />
    </el-button>
    <el-dropdown-menu slot="dropdown" class="no-padding">
        <el-dropdown-item>
            <el-radio-group v-model="comment_disabled" style="padding: 10px;">
                <el-radio :label="true">关闭评论</el-radio>
                <el-radio :label="false">打开评论</el-radio>
            </el-radio-group>
        </el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
<el-input v-model="changeeee" @change="clickChange" placeholder="点击props--change='childClick'"></el-input>
<h3 @click="clickChange('JJJ')">{{clickChange}}父组件传给子组件的toCity:{{sendData}}</h3>
propF:{{propF}}
<br /><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      changeeee: ''
    }
  },

  props: {
    sendData: {
      type: String,
      default: 'okkkkkkk'
    },
    propF: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    change: {
      type: Function
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickChange(val) {
      this.change(val)
    },
    select(val) {
      const data = {
        cityname: val
      }
      // $emit 是事件 @showCityName。 props是冒号 :showCityName
      this.$emit('showCityName', data)
      // select事件触发后，自动触发showCityName事件 ---- emit(你的自定义函数)，然后父组件这样@你的自定义函数=“xxxx”
    }
  },
  computed: {
    comment_disabled: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>
